<template>
  <!-- 上传头像 -->
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <div class="layui-form-item">
      <div class="avatar-add">
        <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
        <label for="pic" class="layui-btn upload-img">
          <i class="layui-icon">&#xe67c;</i>上传头像
        </label>
        <input
          id="pic"
          type="file"
          name="file"
          accept="image/jpg, image/png, image/gif"
          @change="upload"
        />
        <img :src="pic" />
        <span class="loading"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadImg } from '@/api/content'
import config from '@/config'
import { updateUserInfo } from '@/api/user'
import { mapGetters, mapMutations } from 'vuex'

const ERR_OK = 200
const baseUrl =
  process.env.NODE_ENV === 'production'
    ? config.baseUrl.pro
    : config.baseUrl.dev
export default {
  name: 'pic-upload',
  data() {
    return {
      pic:
        this.$store.state.userInfo && this.$store.state.userInfo.pic
          ? this.$store.state.userInfo.pic
          : '/img/bear-200-200.jpg',
      formData: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    upload(e) {
      let file = e.target.files
      let formData = new FormData()
      if (file.length > 0) {
        formData.append('file', file[0])
        this.formData = formData
      }
      this.uploadImg(formData)
    },
    /**
     * 上传图片的逻辑
     * @param formData 所需的表单数据
     */
    async uploadImg(formData) {
      // 向后台发接口 拿到响应数据
      const uploadRes = await uploadImg(formData)
      // 如果code码等于200 说明我们请求成功了
      if (uploadRes.code === ERR_OK) {
        // 拼接图片的地址
        this.pic = baseUrl + uploadRes.data
        // 将图片作为参数传递给updateUserInfo
        this.updateUserInfo({ pic: this.pic })
        // 清空页面的input value值
        document.getElementById('pic').value = ''
      }
    },
    /**
     * 更新用户信息
     * @param data 要更新的用户信息
     */
    async updateUserInfo(data) {
      // 向后台发起请求 拿响应数据
      const updateRes = await updateUserInfo(data)
      // code码等于200说明请求成功了
      if (updateRes.code === ERR_OK) {
        // 浅拷贝一下vuex中的userIno
        let user = JSON.parse(JSON.stringify(this.userInfo))
        // 更新user的信息
        user.pic = this.pic
        // 更新vuex中的状态
        this.SET_USER_INFO(user)
        this.$alert('图片上传成功')
      }
    },
    ...mapMutations(['SET_USER_INFO'])
  }
}
</script>

<style lang="scss" scoped>
#pic {
  display: none;
}
</style>
